<template>
  <div class="my">
    <div class="user-info-holder">
      <img
        src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png"
        alt=""
      />
      <p>用户{{ id }}</p>
    </div>
    <div class="mod-list-holder">
      <ul class="list">
        <li class="item">
          <p>我的订单</p>
        </li>
        <li class="item">
          <p>优惠券</p>
        </li>
        <li class="item">
          <p>我的足迹</p>
        </li>
        <li class="item" @click="toCollect">
          <p>我的收藏</p>
        </li>
        <li class="item" @click="toAddressList">
          <p>地址管理</p>
        </li>
        <li class="item">
          <p>联系客服</p>
        </li>
        <li class="item">
          <p>帮助中心</p>
        </li>
        <li class="item" @click="toFeedBack">
          <p>意见反馈</p>
        </li>
        <li class="item">
          <p></p>
        </li>
      </ul>
    </div>
    <nav-tabber :active="4"></nav-tabber>
  </div>
</template>

<script>
import NavTabber from "@/components/common/nav-tabber";
export default {
  data() {
    return {
      id: localStorage.getItem("openId"),
    };
  },
  methods: {
    // 跳转到反馈界面
    toFeedBack() {
      this.$router.push("/pages/feedback");
    },

    // 跳转到地址界面
    toAddressList() {
      this.$router.push("/pages/addressList");
    },

    // 跳转到收藏界面
    toCollect(){
      this.$router.push('/pages/collect');
    }
  },
  components: {
    "nav-tabber": NavTabber,
  },
};
</script>

<style lang="scss" scoped>
.my {
  .user-info-holder {
    display: flex;
    align-items: center;
    padding-left: 15px;
    height: 140px;
    background-color: #333;
    img {
      display: block;
      height: 74px;
      width: 74px;
      border-radius: 50%;
    }
    p {
      height: fit-content;
      font-size: 14px;
      margin-left: 15px;
      color: #fff;
    }
  }
  .mod-list-holder {
    .list {
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      .item {
        padding: 30px 0;
        width: 32.5%;
        border-left: 2px solid#f4f4f4;
        border-bottom: 2px solid #f4f4f4;
        p {
          text-align: center;
          line-height: 16px;
        }
      }
    }
  }
}
</style>